header {
    display: grid;
    grid-template-columns: 16% 68% 16%;

    & .site-logo {
        place-self: center;
        cursor: pointer;
    }

    & .site-directory {
        display: grid;
        grid-template-rows: 70% 30%;

        & h1 {
            align-self: end;
            justify-self: center;
        }

        & .site-navigation {
            display: grid;

            & ul {
                height: 64%;
                width: 32%;
                display: grid;
                grid-template-columns: repeat(4, 25%);
                place-self: center;
                list-style: none;
                font-size: 25px;
                background: linear-gradient(#95afd0, #4f79b0, #2f496a);
                border-radius: 10px;
                overflow: hidden;

                & a {
                    height: 100%;
                    width: 100%;
                    display: grid;
                    place-items: center;
                    color: white;
                    text-decoration: none;
                    user-select: none;
                }

                & a:hover {
                    background: linear-gradient(#b9c9df, #7294c0, #3f618d);
                }

                & a:active {
                    background: linear-gradient(#7294c0, #3f618d, #203046);
                }
            }
        }
    }
}